<template>
  <div id="EditRecom">
    <div class="EditRecom-box">
      <p>编辑推荐</p>
    </div>
    <div class="EditContent" @click="GoSingleSetView">
      <img :src="EditRecom.image" alt="" />
      <div>
        <p>{{ EditRecom.title }}</p>
        <span>{{ EditRecom.subtitle }} </span>
      </div>
    </div>
    <div class="Edit-bot van-ellipsis">{{ EditRecom.summary }}</div>
  </div>
</template>

<script>
export default {
  name: "EditRecom",
  props: ["EditRecom"],
  methods: {
    GoSingleSetView() {
      console.log(this.EditRecom.article_id);
      this.$router.push({
        path: "/SingleSetView",
        query: {
          article_id: this.EditRecom.article_id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#EditRecom {
  margin: 0.625rem 0;

  .EditRecom-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
  }
  .EditContent {
    width: 100%;
    height: 6.25rem;
    background-color: white;
    border-radius: 0.25rem;
    padding: 0.875rem;
    box-sizing: border-box;
    box-shadow: var(--boxsizi);
    display: flex;
    align-items: center;
    img {
      width: 4.125rem;
      height: 4.125rem;
    }
    div {
      padding: 0.625rem;

      p {
        font-size: 0.875rem;
      }
      span {
        color: var(--fontcolor);
        font-size: 0.75rem;
      }
    }
  }
  .Edit-bot {
    font-size: 0.75rem;
    height: 2.5rem;
    line-height: 2.5rem;
    padding: 0 0.625rem;
    background-color: #f1f5f9;
    box-shadow: var(--boxsizi);
  }
}
</style>